<template>
  <div class="box">
    <!-- 知识点列表 -->
    <!-- 1.年级查询框 + 查询按钮 -->
    <div class="search">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <span> 年级：</span>
        <el-select v-model="value" clearable placeholder="年级">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" class="search_btn" @click="searchgrade()"
          >查询</el-button
        >
      </el-form>
    </div>
    <!-- 2.列表渲染 -->
    <div class="list">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="subject" label="学科" width="370">
        </el-table-column>
        <el-table-column prop="grade" label="年级" width="370">
        </el-table-column>
        <el-table-column prop="num" label="一级知识点数" width="400">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="linkcreate(scope.$index)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 3.分页条 -->
    <div class="page">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.tableData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listdata: [
        ["一年级", "语文一年级"],
        ["二年级", "数学二年级"],
      ],
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      currentPage1: 1,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      //search
      options: [
        {
          value: "一年级",
          label: "一年级",
        },
        {
          value: "二年级",
          label: "二年级",
        },
        {
          value: "三年级",
          label: "三年级",
        },
        {
          value: "四年级",
          label: "四年级",
        },
        {
          value: "五年级",
          label: "五年级",
        },
        {
          value: "六年级",
          label: "六年级",
        },
        {
          value: "初一",
          label: "初一",
        },
        {
          value: "初二",
          label: "初二",
        },
        {
          value: "初三",
          label: "初三",
        },
        {
          value: "高一",
          label: "高一",
        },
        {
          value: "高二",
          label: "高二",
        },
        {
          value: "高三",
          label: "高三",
        },
      ],
      value: "", //知识点查询年级的值
      //list
      tableData: [
        {
          id: 1,
          subject: "语文",
          grade: "一年级",
          num: 3,
        },
        {
          id: 2,
          subject: "数学",
          grade: "二年级",
          num: 2,
        },
      ],
    };
  },
  methods: {
    render() {
      this.tableData = this.arr;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //跳转到知识点创编
    linkcreate(index) {
      if (index == 0) {
        this.$router.push({
          name: "knowledgecreate",
          query: { listdata: this.listdata[0] },
        });
      } else {
        this.$router.push({
          name: "knowledgecreate",
          query: { listdata: this.listdata[1] },
        });
      }
    },

    searchgrade() {
      const filteredData = this.tableData.filter((item) => {
        return item.grade.includes(this.value);
      });
      this.tableData = filteredData;
    },
  },
};
</script>

<style scoped>
.search_btn {
  margin-left: 20px;
}
.list {
  margin-top: 20px;
}
.page {
  margin-top: 20px;
}
</style>